﻿@{
    ViewBag.Title = "管理类型";
    Layout = "~/Views/Shared/_LayuiLayout.cshtml";
}

<blockquote class="layui-elem-quote">
    <div class="pos-r h-38" id="topbar">
        <span class="layui-inline">
            <button type="button" class="layui-btn" data-type="Add"><i class="layui-icon">&#xe654;</i>添加</button>
        </span>
        <span class="layui-inline">
            <button type="button" class="layui-btn" data-type="Edit"><i class="layui-icon">&#xe642;</i>修改</button>
        </span>
        <span class="layui-inline">
            <button type="button" class="layui-btn" data-type="Delete"><i class="layui-icon">&#xe640;</i>删除</button>
        </span>
        <span class="pos-a pos-right">
            <span class="layui-inline">
                <input type="text" class="layui-input" name="keyword" id="txtKeyword" autocomplete="off" placeholder="请输入类别名称">
            </span>
            <span class="layui-inline">
                <button type="button" class="layui-btn" data-type="Search"><i class="layui-icon">&#xe615;</i>搜索</button>
            </span>
            <span class="layui-inline">
                <button type="button" class="layui-btn" data-type="Reload"><i class="layui-icon">&#xe669;</i>刷新</button>
            </span>
        </span>
    </div>
</blockquote>

<!-- 数据表格 -->
<table id="tbList" lay-filter="tbList"></table>

@section scripts{
    <script>
    var $, layer;
    layui.use(['table', 'form'], function () {
        var table = layui.table
          , form = layui.form;
        $ = layui.jquery;
        layer = layui.layer;

        //执行渲染
        table.render({
            elem: '#tbList',
            height: 'full-128',
            url: '@Url.Action("GetList", "CodeType")',
            method: 'post',
            toolbar: true,
            defaultToolbar: ['filter'],
            page: true,
            cols: [[
                { type: 'checkbox', width: 50, fixed: 'left' },
                { field: 'CodeName', title: '类别名称', width: 200 },
                { field: 'Code', title: '类别编码', width: 200, sort: true },
                { field: 'Description', title: '说明', width: 200 },
                { field: 'Sort', title: '排序', width: 100 },
            ]]
        });

        //刷新
        reload = function () {
            table.reload('tbList');
        }

        var active = {
            Reload: function () {
                reload();
            },
            Search: function () {
                table.reload('tbList', { where: { CodeName: $('#txtKeyword').val() } });
            },
            Add: function () {
                layer_show('', '添加类型', '@Url.Action("AddOrEditView", "CodeType")', '400px', '100%','r');
            },
            Edit: function () {
                var data = table.checkStatus('tbList').data;//获取表格选中行
                if (CheckSingle(data.length, layer)) {
                    layer_show('', '修改类型', '@Url.Action("AddOrEditView", "CodeType")' + '?Id=' + data[0].Id, '400px', '100%','r');
                }
            },
            Delete: function () {
                var checkStatus = table.checkStatus('tbList');//获取表格选中行
                var data = checkStatus.data;//获取选中行的数据
                if (CheckMultiple(data.length, layer, '删除')) {
                    layer.confirm('确认要删除吗?', function (index) {
                        $.post(
                            '@Url.Action("DeleteList", "CodeType")',
                            { IdList: GetIdList(data) },
                            function (result) {
                                layer.close(index);
                                if (result.Success) {
                                    layer.msg(result.Message, { icon: 1, time: 3000 });
                                    reload();
                                } else {
                                    layer.alert(result.Message, { icon: 2 });
                                }
                            });
                    });
                }
            },
        };

        //监听表头按钮点击
        $('#topbar .layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
    });
    </script>
}

